<template>
  <!-- "category": 0 //奖品类目，0是实物，1是虚拟 -->
  <div class="fill-address common-page">
    <div v-if="prizeInfo.prizeCategory === 0||prizeInfo.category === 0">

    <not-addresss
      v-if="!addressInfo ||!addressInfo.id "
      @addAddress="enterToMyAddress"
    ></not-addresss>
    </div>
    <address-item
      v-if="
        (addressInfo && addressInfo.id && prizeInfo.prizeCategory === 0) ||
        (addressInfo && addressInfo.id && prizeInfo.category === 0)
      "
      :isLink="true"
      :showBottomImg="true"
      :addressInfo="addressInfo"
      @addressItemClick="enterToMyAddress"
    ></address-item>
    <div class="list-box">
      <span>盲盒奖品</span>
      <commodity-item :boxInfo="prizeInfo"></commodity-item>
    </div>
    <div
      class="recharge-box"
      v-if="prizeInfo.prizeCategory === 1 || prizeInfo.category === 1"
    >
      <van-field
        label="充值手机号"
        placeholder="此处填写"
        v-model="tel"
        type="tel"
        maxlength="11"
      />
      <!-- <span>若抽到的奖品为爱奇艺会员，请填写对应平台账号绑定的手机号，腾讯视频会员请填写QQ账号</span> -->
    </div>
    <div
      class="remark-box"
      v-if="prizeInfo.prizeCategory === 0 || prizeInfo.category === 0"
    >
      <span>重要：</span>
      <span class="remark"
        >若您所获得的商品并非您所需要产品，可联系客服QQ:{{
          contentInfo.qq
        }},或微信：{{
          contentInfo.wechat
        }}，兑换为不低于10元且不超过该商品实际价值的80%蔚来校园现金券。</span
      >
      <span
        >部分等额商品可替换，当抽中“a商品或b商品”产品时，可任选其一，可在详细地址中备注选择的a或b商品，若不备注即视为随机发货</span
      >
      <span class="remark"
        >若您抽到的商品为虚拟商品（如会员等），请在详细地址中填写您对应平台账号。腾讯视频用户QQ登录的直接填写QQ号；微信登录的填写绑定腾讯视频的手机号，该手机号务必先在腾讯视频上面绑定微信。</span
      >
      <span class="remark">其他平台会员账号可直接填写手机号充值</span>
    </div>
    <div class="button-box">
      <van-button
        v-if="prizeInfo.prizeCategory === 0 || prizeInfo.category === 0"
        type="primary"
        round
        @click="savePostAddress"
        :disabled="disabled"
        >确定</van-button
      >
      <van-button
        v-if="prizeInfo.prizeCategory === 1 || prizeInfo.category === 1"
        type="primary"
        round
        @click="seUserBoxtTel"
        :disabled="!tel"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import CommodityItem from "@/components/CommodityItem";
import NotAddresss from "@/components/NotAddresss";
import AddressItem from "@/components/AddressItem";
import store from "@/store";
import { mapGetters } from "vuex";
import apiAddress from "@/common/api/apiAddress";
import apBox from "@/common/api/apBox";
import utilTool from "@/common/utils/utils";
import Share from "./mixin/share";

export default {
  name: "FillAddress",
  components: {
    [CommodityItem.name]: CommodityItem,
    [NotAddresss.name]: NotAddresss,
    [AddressItem.name]: AddressItem,
  },
  mixins: [Share],
  data() {
    return {
      prizeInfo: {}, //奖品信息
      addressInfo: {},
      disabled: true,
      boxId: "",
      contentInfo: {},
      tel: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo", "defaultAddressInfo", "currAddressInfo"]),
  },
  watch: {
    addressInfo: {
      deep: true,
      handler: function (newVal) {
        if (newVal.id) {
          this.disabled = false;
        }
        if (!newVal.id) {
          this.disabled = true;
        }
      },
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === "/myAddress") {
        vm.setShowAddressInfo();
      }
      if (from.path !== "/myAddress") {
        store.dispatch("address/setCurrAddressInfo", {});
        store.dispatch("address/setDefaultAddressInfo", {});
      }
    });
  },
  created() {
    if (this.$route.query.prizeInfo) {
      let prizeInfo = JSON.parse(this.$route.query.prizeInfo) || {};
      this.prizeInfo = prizeInfo;
    }
    console.log(99999999999999);
    console.log(this.prizeInfo);
    if (this.$route.query.boxId) {
      this.boxId = this.$route.query.boxId || "";
    }
    console.log("===================");
    console.log(this.prizeInfo);
    console.log(this.boxId);
    // this.prizeInfo.prizeCategory = 1;
    this.getDefaultAddress();
    this.setShare();
    this.getContent();
  },
  methods: {
    // 设置展示的地址
    setShowAddressInfo() {
      if (this.currAddressInfo && this.currAddressInfo.id) {
        this.addressInfo = utilTool.deepClone(this.currAddressInfo);
        return;
      }
      if (this.defaultAddressInfo && this.defaultAddressInfo.id) {
        this.addressInfo = utilTool.deepClone(this.defaultAddressInfo);
      }
    },
    //  进入我的地址页面
    enterToMyAddress() {
      this.$router.push({
        path: "/myAddress",
      });
    },
    // 保存邮寄地址
    savePostAddress() {
      this.$toast.loading();
      apiAddress
        .submitPostAddress({
          boxId: this.boxId,
          addressId: this.addressInfo.id,
        })
        .then(() => {
          this.$toast.clear();
          this.saveSuccess();
        });
    },
    saveSuccess() {
      this.$router.replace({
        path: "/postDone",
      });
    },
    //  获取默认地址
    getDefaultAddress() {
      this.$toast.loading();
      apiAddress
        .getDefaultAddress({
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          if (data.data) {
            store.dispatch("address/setDefaultAddressInfo", data.data);
            this.setShowAddressInfo();
          }
        });
    },
    // 获取联系信息
    getContent() {
      this.$toast.loading();
      apBox.getBoxRuleContact().then((data) => {
        this.$toast.clear();
        let content = {};
        if (data.data.content) {
          content = JSON.parse(data.data.content);
        }
        this.contentInfo = content;
      });
    },
    //  盲盒记录设置虚拟账号
    seUserBoxtTel() {
      console.log("盲盒记录设置虚拟账号");
      console.log(this.boxId);
      console.log(this.prizeInfo);
      // this.$router.replace({
      //   path: "/rechargeStatus",
      //   query: {
      //     // prizeInfo: this.prizeInfo,
      //     prizeInfo: JSON.stringify(this.prizeInfo),
      //     boxId: this.boxId,
      //   },
      // });
      // return;
      this.$toast.loading();
      apBox
        .seUserBoxtTel({
          userBoxId: this.boxId,
          tel: this.tel,
        })
        .then(() => {
          this.$toast.clear();
          this.$router.replace({
            path: "/rechargeStatus",
            query: {
              boxId: this.boxId,
              prizeInfo: JSON.stringify(this.prizeInfo),
            },
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.fill-address {
  padding-bottom: 114px;
}
.address-item {
  border-radius: 16px;
  padding-bottom: 0;
}

.list-box {
  width: 100%;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  > span {
    display: inline-block;
    font-size: 28px;
    color: #555555;
    line-height: 40px;
    margin: 20px 0 0 20px;
  }
}
.recharge-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 24px;
  background: #ffffff;

  .van-cell {
    padding-left: 24px;
    padding-right: 24px;
  }
  .van-cell::after {
    display: none;
  }
  > span {
    display: inline-block;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    font-size: 24px;
    color: #888888;
    line-height: 42px;
  }
}
.remark-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 24px;
  box-sizing: border-box;
  span {
    display: inline-block;
    margin-top: 24px;
    box-sizing: border-box;
    font-size: 26px;
    color: red;
    line-height: 40px;
  }
}
</style>
